<template>
  <el-card
    shadow="never"
    :body-style="{ padding: '0px' }"
    @current-change="currentChangeHandle"
    :page-size="pageSize"
    :total="rows"
    :current-page="pageNo"
  >
    <el-form class="search-box" inline size="small" :model="dataForm">
      <el-form-item>
        <el-input
          v-model="dataForm.appPkgName"
          :placeholder="$t('white_list.application')"
          maxlength="100"
          @blur="() => (dataForm.appPkgName = dataForm.appPkgName.trim())"
          @keyup.enter.native="getDataList((pageNo = 1))"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="getDataList((pageNo = 1))"
          class="p-1.5 align-middle"
        >
          <svg-icon icon-class="search" class="text-lg" />
        </el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="dataListLoading" :data="dataList">
      <el-table-column type="expand">
        <template v-slot:props>
          <el-descriptions>
            <el-descriptions-item :label="$t('white_list.pubKey')">{{
              props.row.pubKey
            }}</el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column
        prop="appPkgName"
        header-align="center"
        align="center"
        min-width="80px"
        :label="$t('white_list.application')"
      >
      </el-table-column>
      <el-table-column
        prop="creTime"
        header-align="center"
        align="center"
        :formatter="formatDate"
        min-width="80px"
        :label="$t('group.operator.bindTime')"
      >
      </el-table-column>
      <el-table-column
        prop="updTime"
        header-align="center"
        align="center"
        :formatter="formatDate"
        min-width="80px"
        :label="$t('common.updateTime')"
      >
      </el-table-column>
      <el-table-column
        v-if="isAuth('10401000.MANAGE')"
        header-align="center"
        align="center"
        width="315"
        :label="$t('common.operate')"
      >
        <template v-slot="scope">
          <!--          <el-button type="primary" @click="bindHandle(scope.row.id)">Bind</el-button>-->
          <el-tooltip
            class="item"
            effect="dark"
            content="Bind Operator"
            placement="top"
          >
            <el-button icon="el-icon-link" @click="bindHandle(scope.row.id)">
            </el-button>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="Modify"
            placement="top"
          >
            <el-button
              style="color: #ff7f50"
              @click="modifyHandle(scope.row.id)"
              icon="el-icon-edit"
            />
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="Delete Whitelist"
            placement="top"
          >
            <el-button
              style="color: #dc143c"
              @click="deleteHandle(scope.row.id, scope.row.appPkgName)"
              icon="el-icon-delete"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <add-or-update-application
      v-model="visible"
      @close="visible = false"
      ref="addOrUpdate"
      @refreshDataList="init"
    >
    </add-or-update-application>
    <bind-operator
      v-model="bindOperatorVisible"
      @close="bindOperatorVisible = false"
      ref="bind"
      @refreshDataList="init"
    >
    </bind-operator>

    <!--    <bind-operator v-if="bindOperatorVisible" v-model="bindOperatorVisible" :child-data="{id: this.id}"/>-->
  </el-card>
</template>

<script>
import { formatDate } from '@/utils/formatDate'
import { whiteListPage, deleteApp } from '@/api/whitelist'
import AddOrUpdateApplication from './add-or-update-application'
import BindOperator from './bind-operator'
import { isAuth } from '@/utils'

export default {
  components: {
    AddOrUpdateApplication,
    BindOperator
  },
  data() {
    return {
      dataForm: {
        appPkgName: ''
      },
      visible: false,
      bindOperatorVisible: false,
      dataList: [],
      appId: 0,
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      dataListLoading: false
    }
  },
  methods: {
    isAuth,
    init() {
      this.bindOperatorVisible = false
      this.pageNo = 1
      this.getDataList()
    },
    formatDate(row, column, cellValue, index) {
      return formatDate(cellValue, 'YYYY-MM-DD  HH:mm:ss')
    },
    getDataList() {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        appPkgName: this.dataForm.appPkgName
      }
      console.log(params)
      this.dataListLoading = true
      whiteListPage(params)
        .then((data) => {
          console.log(data)
          this.dataList = data.data
          this.rows = data.rows
          this.dataListLoading = false
        })
        .catch((e) => {
          this.$confirmError(e)
          this.dataListLoading = false
          console.log(`err:${JSON.stringify(e)}`)
        })
    },
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNo = 1
      this.getDataList()
    },
    currentChangeHandle(val) {
      this.pageNo = val
      this.getDataList()
    },
    deleteHandle(id, appPkgName) {
      this.$confirm(
        this.$t('white_list.tipDeleteApplication', { appPkgName: appPkgName }),
        '',
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning'
        }
      ).then(() => {
        this.dataListLoading = true
        deleteApp(id)
          .then((data) => {
            this.getDataList()
            this.dataListLoading = false
          })
          .catch((e) => {
            this.$confirmError(e)
            this.dataListLoading = false
          })
      })
    },
    modifyHandle(id) {
      this.visible = true
      console.log(id)
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    bindHandle(id) {
      this.bindOperatorVisible = true
      this.$nextTick(() => {
        this.$refs.bind.init(id)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;

  &--border-none {
    border-radius: 0;
  }
}
</style>
